<template>
  <view class="container">
	  <view class="null" v-if="likesAndFavorites.length==0">
	  	您还没有任何点赞和收藏
	  </view>
    <view v-for="(item, index) in likesAndFavorites" :key="index">
      <view  class="comment-item" >
		<u-avatar :src="item.avatar" @click="goToPersonalInformation(item.senderId,item.sender)" mode="aspectFill" class="avatar"></u-avatar>
      	      <view @click="goToLiveDisplay(item.receiverId,item.postId)">
      	      	<view class="content">
      	      	        <view class="username">{{ item.sender }}</view>
      	      	        <view class="date">在 {{ timeShow(item.time) }} {{ item.msg }}</view>
      	      	        <view class="text">{{ item.title }}</view>
      	      	<!--        <view class="details">{{ item.details }}</view> -->
      	      	      </view>
      	      </view>
      </view>
    </view>
  </view>
</template>

<script>
		import { mapState } from 'vuex';
export default {
	computed: {
		    ...mapState(["isLikesChange"]), // 映射 Vuex 状态
		 },
	watch:{
		// isLikesChange(newVal, oldVal) {
		// 	this.likesAndFavorites=uni.getStorageSync('likesList')||[]
		// 	this.$store.commit("changeLikes",null);
		// },
	},
  data() {
    return {
      likesAndFavorites: [
          // {
          //     sender: "澄鱼宴",
          //     time: "2024-10-23",
          //     msg: "点赞了你的评论",
          //     comment: "太厉害了 👍👍👍👍",
          //     title: "自定义异常类",
          //     avatar: ""
          // },
      ]

    };
  },
  created() {
  	this.likesAndFavorites=uni.getStorageSync('likesList')||[]
	this.likesAndFavorites.forEach((data)=>{
		data.avatar=uni.getStorageSync('userAvatar'+data.senderId)
	})
	console.log(this.likesAndFavorites)
  },
  methods:{
	  goToPersonalInformation(uid,username) {
	    uni.navigateTo({
	      url: "/pages/personalInformation/personalInformation?uid=" + uid+"&username="+username
	    });
	  },
	  goToLiveDisplay(uid, postId) {
	    uni.navigateTo({
	      url: "/pages/liveDisplay/liveDisplay?uid=" + uid + "&postId=" + postId,
	    });
	  },
  	  timeShow(timestamp){
  	  		 const now = new Date();
  	  		    const messageTime = new Date(timestamp);
  	  		    const diffInSeconds = Math.floor((now - messageTime) / 1000);
  	  		    
  	  		    if (diffInSeconds < 60) {
  	  		        return '刚刚';
  	  		    } else if (diffInSeconds < 3600) {
  	  		        const minutes = Math.floor(diffInSeconds / 60);
  	  		        return `${minutes}分钟前`;
  	  		    } else if (diffInSeconds < 86400) {
  	  		        const hours = Math.floor(diffInSeconds / 3600);
  	  		        return `${hours}小时前`;
  	  		    } else {
  	  		        const year = messageTime.getFullYear();
  	  		                const month = String(messageTime.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
  	  		                const day = String(messageTime.getDate()).padStart(2, '0');
  	  		                const hour = String(messageTime.getHours()).padStart(2, '0');
  	  		                const minute = String(messageTime.getMinutes()).padStart(2, '0');
  	  		                
  	  		                return `${year}-${month}-${day} ${hour}:${minute}`;
  	  		    }
  	  		},
  }
};
</script>

<style>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}
.comment-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 15rpx;
  background-color: #ffffff;
  border-radius: 8rpx;
  margin:0 20rpx 20rpx 20rpx;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.avatar {
  width: 100rpx;
  height: 100rpx;
  margin: auto 10rpx;
  border-radius: 25rpx;
}
.content {
  flex: 1;
}
.username {
  font-weight: bold;
  font-size: 32rpx;
}
.date {
  color: #888;
  font-size: 24rpx;
  margin-top: 15rpx;
}
.text, .details {
  margin-top: 15rpx;
  color: #333;
  display: -webkit-box;
  font-size: 28rpx;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; 
    background-color: #f9f9f9;
}
.null{
	padding-top: 100rpx;
	color: lightgray;
	font-size: 30rpx;
	text-align: center;
}
</style>